<template>
  <div class="headerCom">
    <div class="row items-center">
      <div class="col-auto text-left items-center">
        <q-icon
          name="fa-solid fa-gear fa-rotate-90 fa-3x"
          class="iconMenu"
          @click="openNav"
        />
      </div>
      <div class="col text-center hderBox">
        <span class="titleText">选单</span>
      </div>
      <!-- <div class="f-small col-3 text-right infoBox"> -->
      <div class="col-auto text-right infoBox">
        <!-- Personal Info -->
        {{ staffID }} {{ cnName }} <br />
        {{ site }} {{ deptName }} {{ role_chinese_name }} <br />
        {{ userCode }}

      </div>
    </div>
  </div>

  <hr class="titleHr" />

  <!-- Side Menu Bar -->
  <div id="sideMenu" class="sidemenu">
    <div class="row justify-between items-center iconBox">
      <img src="/icons/favicon_gns_logo_96x53.png" class="gns-logo col-auto" />
      <q-icon
        name="fa-solid fa-gear fa-rotate-90 fa-3x"
        class="closeMenuBtn col-auto"
        @click="closeNav"
      />
    </div>
    <!-- <q-icon name="fa-solid fa-gear fa-rotate-90 fa-3x" class="closeMenuBtn"  @click="closeNav"/> -->
    <div class="pagesBox">
      <hr class="titleHr" />
      <a @click="routeToPage('changeRole')"><span>更改工作帐户</span></a>
      <hr class="titleHr" />
      <a @click="routeToPage('changePW')">更改密码</a>
      <hr class="titleHr" />
      <!-- <div v-show="role === 'DISPATCHER'"> -->
      <div>
        <a @click="logout()">登出</a>
        <hr class="titleHr" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useUserStore } from "src/stores/modules/userStore";
import { useQuasar } from "quasar";

const $router = useRouter();
const userStore = useUserStore();
const $q = useQuasar();

const staffID = userStore.staffID;
const cnName = userStore.cnName;
let deptName = " ";
let deptCode = " ";
let role = null;
let site = " ";
let source = null;
let userCode = " ";
let role_chinese_name = " ";


// Get deptName & deptCode & Role
if (userStore.currentDept != null) {
  console.log("currentDept: ", userStore.currentDept);
  deptName = userStore.currentDept.deptName;
  deptCode = userStore.currentDept.deptCode;
  role = userStore.currentDept.roleGroup;
  source = userStore.currentDept.source;
  userCode = userStore.currentDept.userCode;
  role_chinese_name = userStore.currentDept.role_chinese_name;
  // console.log(userStore.currentPerm);
  if (source == "4083") {
    site = "内销";
  } else if (source == "1062") {
    site = "外销";
  }
}
// Set the width of the side navigation to 250px
const openNav = () => {
  document.getElementById("sideMenu").style.width = "250px";
};

// Set the width of the side navigation to 0
const closeNav = () => {
  document.getElementById("sideMenu").style.width = "0";
};

// Route Page
const routeToPage = (page) => {
  page === "changeRole"
    ? $router.push("/chooseRole")
    : page === "changePW"
    ? $router.push("/changePW")
    : console.log("wrong input");
};

// Function: Logout
const logout = () => {
  return userStore.logout().then(() => {
    $router.push("/auth");
    $q.notify({
      type: "positive",
      textColor: "white",
      message: "登出成功!",
      timeout: 2000,
      position: "center",
    });
  });
};
// const logout = () => {
//   // call api for log out
//   // route back to login page
//   userStore.logout();
//   $router.push("/auth");
// };
</script>

<style lang="scss">
/* side menu */
.sidemenu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #332c63;
  overflow-x: hidden;
  padding-top: 20px;
  //   transition: 0.5s;
}

.sidemenu .pagesBox {
  margin-top: 14px;
}

.sidemenu a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1.3rem;
  //   font-size: 25px;
  font-weight: bold;
  color: #d8d8d8;
  display: block;
  transition: 0.1s;
}

.sidemenu a:hover {
  color: #ffffff;
}

.sidemenu .closeMenuBtn {
  // position: absolute;
  color: white;
  font-size: 2.3rem;
  // top: 25px;
  // right: 20px;
}

.iconBox {
  padding-left: 10px;
  padding-right: 10px;
}

.gns-logo {
  max-height: 40px;
  max-width: 72px;
}
</style>
